<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .progress {
            width: 200px;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0px;
            overflow: hidden;
        }

        /* 初始状态设置进度条宽度为0px */
        .progress > div {
            width: 0px;
            height: 100%;
            background-color: yellowgreen;
            transition: all .3s ease;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uploadFile").click(function () {
                // 1.获取要上传的文件
                var fileData = $("#photo")[0].files[0];
                if (fileData === undefined) {
                    alert('请先选择文件')
                }
                // 可以异步上传二进制文件
                var formData = new FormData();
                formData.append("headPhoto", fileData)
                // 2.ajax向后台发送请求
                $.ajax({
                    type: "post",
                    data: formData,
                    url: 'fileUpload6.do',
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        console.log(result)
                        // 3.接收后台响应的信息
                        alert(result.message)
                        // 4.图片回显: 如果后端未返回ip+port+目录名就需要自己拼接上
                        $("#headImg").attr("src", "http://192.168.3.5:8090/upload/" + result.newFileName);
                        // 将文件类型和文件名放入form表单
                        $("#photoInput").val(result.newFileName)
                        $("#filetypeInput").val(result.fileType)
                    },
                    xhr: function () {
                        var xhr = new XMLHttpRequest();
                        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                        xhr.upload.addEventListener('progress', function (e) {
                            //loaded代表上传了多少
                            //total代表总数为多少
                            var progressRate = (e.loaded / e.total) * 100 + '%';
                            //通过设置进度条的宽度达到效果
                            $('.progress > div').css('width', progressRate);
                        })
                        return xhr;
                    }
                })

            })
        })
    </script>
</head>
<body>
<form action="addPlayer2" method="get">
    <p>账号<input type="text" name="username"></p>
    <p>密码<input type="text" name="password"></p>
    <p>昵称<input type="text" name="nickname"></p>
    <p>头像:
        <br/>
        <img id="headImg" alt="您还未上传文件" style="width: 200px;height: 200px;"/>
        <%--进度条--%>
    <div class="progress">
        <div></div>
    </div>
    <%-- <img src="upload/671ade8b-ccaa-4fbd-9dff-f232c1c4bf9e.png" alt=""/>--%>
    <br/>
    <input id="photo" type="file">
    <a id="uploadFile" href="javascript:void(0)">立即上传</a>
    <%--使用隐藏的输入框存储文件名称和文件类型--%>
    <input id="photoInput" type="hidden" name="photo">
    <input id="filetypeInput" type="hidden" name="filetype">
    </p>
    <p><input type="submit" value="注册"></p>
</form>
</body>
</html>
